<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />	
		<title>Document</title>
		<link rel="stylesheet" href="css/04-1.css">
		<script src="https://unpkg.com/vue@next"></script>		
	</head>
	<body>
		<div id="app">
			<h2>个人信息</h2>
			<div class="item">
				姓名:<input type="text" :value="persion.name" />
			</div>
			<div class="item">
				年龄:<input type="number" :value="persion.age" />
			</div>
			<div class="item">
				身高:<input type="number" v-model="persion.height" :value="persion.height" />
			</div>
			<div v-if="persion.height>=180" class="itme_icon">
				兄弟呀，再有八块腹肌会更好
			</div>
			<div v-if="persion.height>=170 && persion.height<180" class="itme_icon">
				该用功学习了，不然没对象了
			</div>
			<div v-if="persion.height>=160 && persion.height<170" class="itme_icon">
				兄弟啊，咱身高一般，但智商高啊
			</div>
			<div v-if="persion.height<160" class="itme_icon">
				别理他们，咱浓缩的都是精华
			</div>			
		</div>
	</body>
	<script>
		const Counter = {
			data(){
				return{
					persion: {name:'小明',age:20,height:197}
				}
			}
		}
		Vue.createApp(Counter).mount('#app')
	</script>
</html>